<template>
  <div class="item-detail flex column">
    <div class="item-title">快速入口</div>
    <div class="item-content">
      <div class="flex center">
        <Button type="primary" @click="add">添加新的快速入口</Button>
        <p style="margin-left: 10px;font-size: 12px;color: gray;">建议尺寸640*640</p>
      </div>
    </div>
    <div class="content-edit scroll" ref="contentEdit">
      <draggable v-model="detailData.json" :options="dragOption">
        <transition-group>
          <div class="content-item flex center" v-for="(item,index) in detailData.json" :key="'banneredit'+index">
            <div class="img-wrapper">
              <div class="input-file-wrapper">
                <img :src="item.image_url" />
                <input :name="index" type="file" accept="image/*" @change='handleFileChange'></input>
              </div>
            </div>
            <div class="form-wrapper">
              <Form :model="item" :label-width="70">
                <FormItem label="标题">
                  <Input @on-focus="dragOption.disabled = true" @on-blur="dragOption.disabled = false"  style="width: 200px;" v-model="item.title" placeholder="请输入标题"></Input>
                </FormItem>
                <FormItem label="跳转链接">
                  <div class="flex center">
                    <Select v-model="item.skip_type" @on-change="chageSel(item)" class="select-wrapper">
                      <Option value="good">商品</Option>
                      <Option value="label">微页面</Option>
                      <!-- <Option value="group">团长免单</Option> -->
                      <Option value="shop">企业</Option>
                      <Option value="home">首页</Option>
                      <!-- <Option value="h5">H5</Option> -->
                      <!-- <Option value="miniprogram">小程序</Option> -->
                    </Select>
                    <Input style="width: 200px;" @on-focus="dragOption.disabled = true" @on-blur="dragOption.disabled = false" v-model="item.skip_url" @click.native="tapInput(index,item)" placeholder="请输入商品ID或微页面ID" v-if="item.skip_type != 'group' && item.skip_type != 'h5' && item.skip_type != 'miniprogram'  && item.skip_type != 'home'"></Input>
                    <Input style="width: 200px;" @on-focus="dragOption.disabled = true" @on-blur="dragOption.disabled = false" v-model="item.skip_url" placeholder="请输入H5地址" v-if="item.skip_type == 'h5'"></Input>
                    <div class="disFLex vertical"  v-if="item.skip_type == 'miniprogram'">
                      <Input style="width: 200px;margin-right:6px;" @on-focus="dragOption.disabled = true" @on-blur="dragOption.disabled = false" v-model="item.app_id" placeholder="请输入小程序Appid"></Input>
                      <Input style="width: 200px;" @on-focus="dragOption.disabled = true" @on-blur="dragOption.disabled = false" v-model="item.skip_url" placeholder="请输入小程序路径"></Input>
                    </div>    
                    <!-- <Input @on-focus="dragOption.disabled = true" @on-blur="dragOption.disabled = false"  style="width: 200px;" v-model="item.skip_url" @click.native="tapInput(index,item)" placeholder="请输入商品ID或微页面ID" ></Input> -->
                  </div>
                  <div v-if="item.skip_type=='h5'" style="margin-top: 10px;">跳转H5需4.18.1030以上版本才支持</div>
                  <div v-else-if="item.skip_type=='miniprogram'" style="margin-top: 10px;">跳转小程序需4.19以上版本才支持</div>
                  <div class="hide">路径：{{getSkipUrl(item.skip_type,item,item.skip_url)}}</div>
                </FormItem>
              </Form>
            </div>
            <div class="icon-wrapper" @click="del(index)">
              <Icon type="ios-trash-outline" />
            </div>
          </div>
        </transition-group>
      </draggable>
    </div>

    <!-- 商品选择器 -->
     <goodsSelect buyMode="-9" @confirm="commitGoodsFn" :selectNum="1" ref="goodsModal" :goodsIdStr="goodsIdStr" ></goodsSelect>

     <!-- 微页面选择器 -->
     <micropage-select ref="micropageModal" @confirm="chosePages"></micropage-select>

     <!-- 企业选择器 -->
     <shop-select ref="shopselect" @commitShopFn="commitShopFn"></shop-select>

  </div>
</template>
<script>

import { uploadImage } from 'api/uploadImage'

// 商品选择器组件
import goodsSelect from 'base/goods-select/goods-select'
// 微页面选择器组件
import MicropageSelect from 'base/micropage-select/micropage-select'
// 企业选择器
import shopSelect from 'base/shopSelect/shopSelect'

import draggable from 'vuedraggable'

export default {
  name: 'ActivityDetail',
  props: {
    /**
     * @description 起始值，即动画开始前显示的数值
     */
    detailData: {
      
    },
  },
  data() {
    return {
      // 编辑索引
      jumpIndex: 0,
      dragOption: {
          animate: 150,
          disabled: false
      },
	}
  },
  methods: {

    // 设置path 兼容旧写法
    getSkipUrl:function(_type,_item,_id){
        if(_type == 'good'){
            _item.path = _id ? ('app/mall/item/item?goodsId='+_id) : "";
            return _item.path;
        }else if(_type == 'label'){
            _item.path = _id ? ('app/mall/label/label?labelId='+_id) : "";
            return _item.path;
        }else if(_type == 'group'){
            _item.path = 'app/common/webview/webview?url=headGroup/index.html';
            _item.skip_url = 'app/common/webview/webview?url=headGroup/index.html';
            return  _item.path;
        }else if(_type == 'home'){
            _item.path = 'app/mall/index/index';
            _item.skip_url = 'app/mall/index/index';
            return  _item.path;
        }else if(_type == 'shop'){
            _item.path = _id ? ('app/shop/index/index?shopId='+_id) : "";
            return _item.path;
        }else if(_type == 'h5'){
             _item.path = _id ? ('app/common/articleWebview/articleWebview?url='+_id) : "";
            return _item.path;
        }else if(_type == 'miniprogram'){
             _item.path=_id;
            return _id;
        }
    },

    tapInput(index,item) {
      this.jumpIndex = index;
      if (item.skip_type == "good") {
        this.openGoodsSelectFn();
      } else if (item.skip_type == "label") {
        // 打开微页面选择器
        this.$refs.micropageModal.show();
      } else if (item.skip_type == "shop") {
        this.$refs.shopselect.openFn(item.skip_url)
      }
    },

    // 打开商品选择器
    openGoodsSelectFn(){
        this.$refs.goodsModal.show()
    },


    // 选中商品回调
    commitGoodsFn(_id){
        this.detailData.json[this.jumpIndex].skip_url = _id;

    },
    
    // 选中微页面回调
    chosePages(ids) {
        this.detailData.json[this.jumpIndex].skip_url = ids[0];
    },

    // 选中企业回调
    commitShopFn(arr){
        this.detailData.json[this.jumpIndex].skip_url = arr[0].shop_id;
    },

   

    // 处理图片
    handleFileChange (event) {
      var that = this;
      uploadImage(event.target.files[0]).then(imgUrl => {
          that.detailData.json[event.target.name].image_url = imgUrl;
      }).catch(err => {
          that.$Message.error(err);  
      })  
    },

    // 添加
    add(){
    	var _addActivity={
            image_url:"https://file.open.banchengyun.com/44/2018/01/29/ac41285cce0f313833f0cf406d162661.png",
            skip_type:"good",
            skip_url:"",
            sort:"",
            sub_title:"未配置",
            title:"（标题）"
        }
        if(typeof this.detailData.json != 'object') this.detailData.json=[]
            this.detailData.json.push(_addActivity);
      	this.$Message.success("添加成功，请编辑详细内容");
        var that = this;
        setTimeout(function(){
          that.$refs.contentEdit.scrollTop = that.$refs.contentEdit.scrollHeight; 
        },250)
    },

    // 删除
    del(index) {
      this.detailData.json.splice(index,1);
    },

    /*
    * 选择器
    */
    chageSel(item){
      if(item.skip_type == 'group'){
          item.path = 'app/common/webview/webview?url=headGroup.html';
      }else{
          item.skip_url='';
      }
    },
    
  },

  computed: {
    goodsIdStr: function () {
      if (this.detailData.json.length>0) {
        if (this.jumpIndex  > (this.detailData.json.length-1)) {
          this.jumpIndex = 0;
        } 
        return this.detailData.json[this.jumpIndex].skip_url;
      } else {
        return "";
      }
    }
  },
  
  created() {
    
  },
  
  components: {
  	draggable,goodsSelect,MicropageSelect,shopSelect
  }
}

</script>

<style scoped>

@import url("../baseModule.less");

.item-content {
	padding: 16px;
}

.content-edit {
	flex: 1;
	padding: 16px 16px 16px 24px;
	padding-top: 0;
}
.img-wrapper {
	  width: 82px;
    min-width: 82px;
    height: 82px;
    padding: 5px;
    border: 1px solid #f2f2f2;
}
.content-item {
	padding: 16px 0;
  border-top: 1px solid #f2f2f2;
}
.content-item:hover {
  cursor: move;
}
.form-wrapper {
    margin: 0 16px 0 12px;
    flex: 1;
}

/*上传图片控件*/
.input-file-wrapper {
	width: 100%;
	height: 100%;
	position: relative;
}
.input-file-wrapper img {
	width: 100%;
	height: 100%;
}
.input-file-wrapper input {
	position: absolute;
	left: 0;
	width: 100%;
	bottom: 0; top: 0;
	opacity: 0;
}
.icon-wrapper {
	min-width: 50px;
    width: 50px;
    height: 50px;
    background: #f2f2f2;
    border-radius: 50%;
    cursor: pointer;
    font-size: 24px;
    display: flex;
    align-items: center;
	justify-content: center;
}
	
</style>
